<template>
  <el-container class="home_container">
    <el-header>
      <div class="home_title">动植物离子浓度检测系统</div>
      <div class="home_userinfoContainer">
        <el-dropdown @command="handleCommand">
          <el-button @click="exit">退出</el-button>
          <el-dropdown-menu slot="dropdown">
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
                default-active="0"
                class="el-menu-vertical-demo" style="background-color: #ECECEC" router>
            <template>
                <el-menu-item :index="this.path1">
                    <span slot="title">{{this.name1}}</span>
                </el-menu-item>
                <el-menu-item :index="this.path2"  v-if="identity=='管理员'">
                    <span slot="title">{{this.name2}}</span>
                </el-menu-item>
                <el-menu-item :index="this.path3">
                    <span slot="title">{{this.name3}}</span>
                </el-menu-item>
                <el-menu-item :index="this.path4"   >
                    <span slot="title">{{this.name4}}</span>
                </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
          </el-breadcrumb>
          <keep-alive>
            <router-view v-if="this.$route.meta.keepAlive"></router-view>
          </keep-alive>
          <router-view v-if="!this.$route.meta.keepAlive"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
  import {getRequest} from '../utils/api'
  export default{
    methods: {
      handleCommand(command){
        var _this = this;
        if (command == 'logout') {
          this.$confirm('注销登录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function () {
            getRequest("/logout")
            _this.currentUserName = '游客';
            _this.$router.replace({path: '/'});
          }, function () {
          })
        }
      },
      exit(){
        this.$router.replace({path: '/'});
      }
    },
    mounted: function () {
        this.router=this.$router.options.routes
        console.log(this.router);
        console.log(this.router[3].children[0].name);
        this.name1=this.router[3].children[0].name;
        this.path1=this.router[3].children[0].path;
        this.name2=this.router[4].children[0].name;
        this.path2=this.router[4].children[0].path;
        this.name3=this.router[5].children[0].name;
        this.path3=this.router[5].children[0].path;
        this.name4=this.router[6].children[0].name;
        this.path4=this.router[6].children[0].path;
        this.name5=this.router[7].children[0].name;
        this.path5=this.router[7].children[0].path;
      var _this = this;
      getRequest("/currentUserName").then(function (msg) {
        _this.currentUserName = msg.data;
      }, function (msg) {
        _this.currentUserName = '游客';
      });
      let user = sessionStorage.getItem("user");
      if (user != null) {
        this.currentUser = JSON.parse(user);
        this.identity = this.currentUser[0].identity;
        console.log(this.identity);
      }
    },
    data(){
      return {
        currentUserName: '',
        identity: "",
        currentUser: {},
          router:{},
          path1:'',
          name1:'',
          path2:'',
          name2:'',
          path3:'',
          name3:'',
          path4:'',
          name4:'',
          path5:'',
          name5:'',
      }
    }
  }
</script>
<style>
  .home_container {
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
  }
  .el-header {
    background-color: #20a0ff;
    color: #333;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .el-aside {
    background-color: #ECECEC;
  }
  .el-main {
    background-color: #fff;
    color: #000;
    text-align: center;
  }
  .home_title {
    color: #fff;
    font-size: 22px;
    display: inline;
  }
  .home_userinfo {
    color: #fff;
    cursor: pointer;
  }
  .home_userinfoContainer {
    display: inline;
    margin-right: 20px;
  }
</style>
